<template>
    <div class="com-cnt">
        <ul class="allCommission">
            <li>佣金总额</li>
            <li>￥<span>{{allYj}}</span></li>
        </ul>
        <div class="recommend">
            <p>到账银行卡</p>
            <div class="cardid">{{bankCard}} <span></span></div>
            <p class="txje">提现金额</p>
            <div class="txcash">￥ 
                <div class="cashnumber">{{checknum}}</div>
                <div class="checknum">
                    <span @click="checknum=checknum-100" v-show="checknum>0">-</span>
                    <span v-show="checknum<=0">-</span>
                    <span>{{checknum}}</span>
                    <span @click="checknum=checknum+100">+</span>
                </div>
            </div>
            <div class="checkMethod" @click="checkMethod">
                申请提现
            </div>
        </div>
        <!-- 弹出层 -->
        <div class="mask" v-show="hidemask == false">
            <div class="sqtxalert">
                <div class="closeAlert" @click="hidemask = true">确定</div>
            </div>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'
import http from "@/assets/js/axios"
import https from "@/assets/js/axiosh"
import { domain } from '@/assets/js/config'
import { domains } from '@/assets/js/config'
import Qs from 'qs'
import { maskTips,maskCallback } from '@/assets/js/dom'
import $ from 'jquery'
export default {
    data() {
        return {
            checknum: 0,
            hidemask: true,
            bankCard: '',
            allYj: 0
        }
    },
    components: {

    },
    mounted: function(){
        this.getBackCard()
        this.getAllYj()
    },
    methods: {

        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        checkMethod: function(){
            if(this.checknum === 0){
                maskTips({id:'numtoolittle',txt:'提现金额不能为0'})
                return false
            }
            this.getList()
        },
        //调取接口
        getList: function(){
            var userToken = localStorage.getItem('tokens')
            var that = this
            let postDo = {money: that.checknum}
            axios({
                url: domains + '/f/agent/home/withapply?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify(postDo)
            }).then(res => { that.listsucc(res) }).catch(err => { that.listerr(err) })
        },
        //调取列表成功
        listsucc: function(res){
            // console.log(res);
            if(res.data.code == 1){
                maskTips({id:'money-less',txt:res.data.message})
            }else if(res.data.code == 100){
                this.hidemask = false
            }else{
                maskTips({id:'other-err',txt:res.data.message})
            }

        },
        listerr: function(err){
            console.log(err)
        },
        //拿取银行卡信息
        getBackCard: function(){
            var userToken = localStorage.getItem('tokens')
            var that = this
            axios({
                url: domains + '/f/agent/home/info?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify(postDo)
            }).then(res => { that.getCardSucc(res) }).catch(err => { console.log(err) })
        },
        getCardSucc: function(res){
            this.bankCard = res.data.data.id_bank
        },
        //拿取佣金总额信息
        getAllYj: function(){
            var userToken = localStorage.getItem('tokens')
            var that = this
            axios({
                url: domains + '/f/agent/home/center?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify(postDo)
            }).then(res => { that.getYjSucc(res) }).catch(err => { console.log(err) })
        },
        getYjSucc: function(res){
            // console.log(res);
            this.allYj = res.data.data.money
            
        },
    }
}
</script>

<style lang='stylus' scoped>
.com-cnt
    width 100%
    height 100%
    background #f0f0f0
    padding-top 15px
    position relative
    z-index 99
    .allCommission
        width 340px
        height 97px
        background #c3a368
        border-radius 5px
        color #fff
        margin 0 0 0 18px
        text-align center
        li:first-child
            font-size 19px
            padding-top 20px
        li:last-child
            font-size 12px
            margin-top 17px
            span 
                font-size 23px
    .recommend
        background #ffffff
        margin 23px 18px 0 17px
        padding 23px 18px 19px 17px
        p
            font-size 16px
        .cardid
            font-size 12px
            color #808080
            height 35px
            line-height 35px
            border-bottom 1px dashed #ccc
            span 
                float right
        .txje
            margin-top 35px
        .txcash
            font-size 20px
            margin-top 30px
            border-bottom 1px solid #E6E6E6
            .cashnumber
                display inline-block
                font-size 30px
            .checknum
                float right 
                color #999999
                span 
                    border 1px solid #999999
                    padding 0 10px
        .checkMethod
            width 306px
            height 50px
            line-height 50px
            text-align center
            background #aad112
            color #ffffff
            font-size 16px
            border-radius 5px
            margin 29px 0 0 0
.mask
    position: fixed;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.59);
    color: rgb(232, 232, 232);
    font-family: Menlo, Consolas, monospace;
    font-size: large;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow: auto;
    z-index 99
    .sqtxalert
        width 256px
        height 164px
        background url('../../assets/imgs/agent/sqtxalert.png')
        background-size 100% 100%
        position absolute
        left 59px
        top 266px
        .closeAlert
            width 100%
            height 50px
            line-height 50px
            text-align center
            border-top 1px solid #dddddd
            color #aad112
            position absolute
            bottom 0
</style>
